---
title: Better Auth integration
description: Using Better Auth as your authentication service.
---

Better Auth is a new and comprehensive authentication framework for TypeScript,
and is the default authentication provider for the TanStack Router starter kit.

Better Auth is configured with Github oauth and email/password authentication
out of the box. Other authentication options like Passkeys can easily be added.

## Configure

The NextAuth configuration is located in `packages/better-auth` and is split up
into two files:

- `auth.ts` - The main configuration.
- `client.ts` - The auth service for the AuthProvider.
- `env.ts` - The environment variables.
- `server.ts` - The server side auth service.

Please refer to the
[Better Auth documentation](https://www.better-auth.com/docs/introduction) for
more information on how to configure Better Auth.

## Add a new provider

To add a new authentication provider, here is an example of how to add Google as
an authentication provider:

Edit the `auth.ts` file to add the new provider:

```ts
// packages/better-auth/src/auth.ts

export const auth = betterAuth({
  // ... existing code
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: .GOOGLE_CLIENT_SECRET,
    },
  },
  // ... existing code
})
```

Note that we are using the `env` object to get the client ID and secret from the
environment variables. You can add additional variables to the env schema
object.

```ts
// packages/better-auth/src/env.ts
import { createEnv } from 'env/create'
import { z } from 'zod'

export const env = createEnv(
  z.object({
    AUTH_DEBUG: z.coerce.boolean().optional(),
    AUTH_SECRET: z.string(),
    EMAIL_FROM: z.string(),

    // Social providers
    GOOGLE_CLIENT_ID: z.string(),
    GOOGLE_CLIENT_SECRET: z.string(),
  }),
)
```

After adding the new provider, you can add the new environment variables to the
`.env` file.

```
// .env
GOOGLE_CLIENT_ID=<your-client-id>
GOOGLE_CLIENT_SECRET=<your-client-secret>
```

Now you can add the new provider to your authenication screens.

```tsx
// apps/web/features/auth/providers.tsx
import { useLocalStorageValue } from '@react-hookz/web'
import { useAuth } from '@saas-ui/auth-provider'
import { Button, Stack } from '@saas-ui/react'
import { FaGoogle } from 'react-icons/fa6'

import { LastUsedProvider } from './last-used'

export function Providers() {
  const auth = useAuth()

  const lastUsed = useLocalStorageValue('lastUsedProvider')

  return (
    <Stack gap="2" mb="4">
      <LastUsedProvider value="google">
        <Button
          leftIcon={<FaGoogle />}
          height="9"
          variant="outline"
          onClick={() =>
            auth
              .logIn({
                provider: 'google',
              })
              .then(() => lastUsed.set('google'))
          }
        >
          Continue with Github
        </Button>
      </LastUsedProvider>
    </Stack>
  )
}
```

<Info>
  Note that we store the last used provider in local storage, so that the user
  can continue with the same provider when they return to the page.
</Info>

For more information on how to customize the authentication screens, refer to
the
[customize auth screens](/docs/tanstack-router-starterkit/authentication/customize-auth-screens)
documentation for more information.

## Next up

- [Customize auth screens](/docs/tanstack-router-starterkit/authentication/customize-auth-screens)
